<template>
  <div class="main-style-D">

    <el-row style="height: 180px;  background: #e8f5e9">
      <el-col :span="2"><div class="grid-content "></div></el-col>
      <el-col :span="14"><div class="grid-content ">
        <p style="font-size: 30px;margin-top: 60px;  color: #2e7d32;">{{title_info.enterprise_name}}</p>
      </div></el-col>
      <el-col :span="3" style="margin-top: 25px;  color: #2e7d32;"><div class="grid-content " >
        <p style="font-size: 25px">{{title_info.job_number}}</p>
        <p>需求职位</p>
      </div></el-col>
      <el-col :span="3"   style="margin-top: 25px;  color: #2e7d32;"><div class="grid-content " >
        <p style="font-size: 25px">{{title_info.job_people_number}}</p>
        <p>需求人数</p>
      </div></el-col>
      <el-col :span="2"><div class="grid-content "></div></el-col>
    </el-row>

    <el-tabs v-model="activeName" >
      <el-tab-pane label="公司信息"  name="first" ><description ></description></el-tab-pane>
      <el-tab-pane label="招聘信息"  name="second">
        <div style="width: 80%;left: 10%;position: relative;padding-top: 30px;">
          <job-cards></job-cards>
        </div>
      </el-tab-pane>
    </el-tabs>


  </div>
</template>

<script>

import Description from '@/views/DetailCompany/components/description'
import JobCards from '@/views/DetailCompany/components/JobCards'
import axios from 'axios'

export default {
  name: 'index',
  components: { Description ,JobCards},

  data() {
    return {
      activeName: 'first',
      title_info:{
        enterprise_name:"1",
        job_number:"1",
        job_people_number:"1"
      },
    };
  },
  created () {
    var _this=this
    var company_id=sessionStorage.getItem("YHDetail_company_id")
    this.title_info.enterprise_name=sessionStorage.getItem("YHDetail_company_title")
    axios.post('http://localhost:8080/get_JobNumber?companyID='+company_id)
      .then (function (response) {

        _this.title_info.job_number=response.data.companyJobNum;
        _this.title_info.job_people_number=response.data.companyPeopleNum

      })
      .catch(function (error) {
        console.log(error);
      });
  }

}
</script>

<style >
.main-style-D{
  position:relative;
  background: #FFFFFF;
  left: 15%;
  width: 70%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.main-style-D .el-tabs__nav-wrap::after{
  background: #FFFFFF;
}
.main-style-D .el-tabs__item.is-active{
  color: #1b5e20;
  font-weight: bold;
  background: #FFFFFF;
}
.main-style-D .el-tabs__active-bar{
  background: #FFFFFF;
}
.main-style-D .el-tabs__item:hover{
   color: #1b5e20;
  background: #FFFFFF;
}
.main-style-D .el-tabs__item{
  padding-right: 10px;
  padding-left: 10px;

  font-size: 16px;
  color: rgb(102, 187, 106);
}
.main-style-D .el-tabs__header{
  background: #e8f5e9;
}
.main-style-D .el-tabs__nav{
  left: 5%;
}
.main-style-D .el-descriptions__label.is-bordered-label{
  background: #e8f5e9;
}
.main-style-D #tab-first.el-tabs__item.is-top.is-active
{
  padding-left: 10px;
  padding-right: 10px;
}
.main-style-D #tab-second.el-tabs__item.is-top{
  padding-left: 10px;
  padding-right: 10px;
}
</style>
